<template>
  <div class="similar-recommend-wrapper">
    <div class="keyword similar-item">
      <h3>关键字</h3>
      <div class="keyword-list mt-10">
        <div
          class="k-items"
          v-if="props.data.keywords.length"
          v-for="(item, index) in props.data.keywords"
          :key="index"
        >
          <el-button type="primary"> {{ item.keyword_name }}</el-button>
        </div>
        <div v-else style="width: 100%">
          <el-empty></el-empty>
        </div>
      </div>
    </div>
    <div class="recommend similar-item">
      <h3>内容推荐</h3>
      <div class="doc-wrapper mt-10">
        <div
          class="doc-item"
          v-if="docList.length"
          v-for="(item, index) in docList"
          :key="item.id"
          @click="handleViewData(item)"
        >
          <div class="doc-item-t">
            <div class="doc-item-title">
              <el-icon color="#409eff" size="32"><Document /></el-icon>
            </div>
            <div class="doc-item-desc">
              <el-text line-clamp="2">
                {{ item.filename }}
              </el-text>
            </div>
          </div>
          <div class="doc-item-b">
            {{ item.created_at.replace('T', ' ') }}
          </div>
        </div>
        <div v-else style="width: 100%">
          <el-empty></el-empty>
        </div>
      </div>
    </div>
    <!-- <div class="course-recommend similar-item">
      <h3>课程、视频内容推荐</h3>
      <div class="course-video-recommend mt-10">
        <div
          class="course-item"
          v-for="(item, index) in courseList"
          :key="index"
        >
          <div class="course-item-t">
            <img :src="item.url" width="200" height="100" alt="" />
          </div>
          <div class="course-item-center">{{ item.name }} 课程</div>
          <div class="course-item-b">
            {{ item.time }}
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { httpRecommends } from '@/api/study'
import { useRoute, useRouter } from 'vue-router'
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
const route = useRoute()
const router = useRouter()
const keyWordList = ref([])
// 文档资料 title desc time
const docList = ref<any>([])

const courseList = ref([
  {
    url: 'http://t13.baidu.com/it/u=163149079,4245076403&fm=224&app=112&f=JPEG?w=500&h=500',
    name: '思想政治理论',
    time: '2022-12-12',
    id: 1,
  },
])
const handleViewData = (item) => {
  const url = router.resolve({
    path: '/study/data-items',
    query: {
      data_id: item.id,
      course_id: route.query.course_id,
    },
  })
  window.open(url.href, '_blank')
}
const getSimilar = async (id) => {
  const res: any = await httpRecommends({
    document_id: id,
  })
  if (res) {
    docList.value = res.list
  }
}
watch(
  () => route.query.data_id,
  (newVal) => {
    if (newVal) {
      console.log('newVal', newVal)
      getSimilar(Number(newVal))
    }
  },
  {
    immediate: true,
  },
)
</script>
<style scoped lang="scss">
.similar-recommend-wrapper {
  width: 100%;
  padding-left: 4px;
  .similar-item {
    margin-bottom: 20px;
  }
  .mt-10 {
    margin-top: 10px;
  }
  .keyword {
    .keyword-list {
      width: 100%;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      .k-item {
        height: 32px;
        border-radius: 4px;
        cursor: pointer;
        text-align: center;
        line-height: 16px;
        padding: 8px 10px;
        min-width: 100px;
        font-size: 14px;
        color: #fff;
        width: fit-content;
        background-color: var(--el-color-primary);
      }
    }
  }
  .recommend {
    .doc-wrapper {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      .doc-item {
        width: 260px;
        height: 100px;
        border-radius: 4px;
        padding: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        &:hover {
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          transform: scale(1.02);
        }
        .doc-item-t {
          display: flex;
          align-items: center;
          .doc-item-title {
            margin-right: 10px;
          }
          .doc-item-desc {
          }
        }
        .doc-item-b {
          margin-top: 10px;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  .course-recommend {
    .course-video-recommend {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      .course-item {
        width: 220px;
        height: 160px;
        border-radius: 4px;
        padding: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        &:hover {
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          transform: scale(1.02);
        }
        .course-item-t {
          display: flex;
          align-items: center;
          border-radius: 5px;
          overflow: hidden;
          img {
            object-fit: contain;
          }

          .course-item-title {
            margin-right: 10px;
          }
        }
        .course-item-center {
          font-size: 14px;
          color: #999;
        }
        .course-item-b {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.similar-recommend-wrapper {
  .el-card {
    border-radius: 4px;
    .el-card__body {
      padding: 0;
    }
  }
}
</style>
